<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores';

const router = useRouter();
const userStore = useUserStore();

// 订单数据
const order = ref({
  id: '20230615001',
  createTime: '2023-06-15 14:30:25',
  status: '待发货',
  statusCode: 'pending_shipment',
  
  // 收货信息
  recipient: {
    name: '张三',
    phone: '138****5678',
    address: '北京市朝阳区建国路88号中央公园12号楼2单元501室'
  },
  
  // 配送信息
  delivery: {
    method: '普通配送',
    expectedDate: '2023-06-16',
    expectedTime: '上午 (9:00-12:00)',
    status: '待发货'
  },
  
  // 商品信息
  items: [
    {
      id: 1,
      name: '浪漫红玫瑰花束',
      spec: '11朵',
      package: '牛皮纸',
      price: 199,
      quantity: 1,
      image: 'https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
    }
  ],
  
  // 留言卡片
  message: '生日快乐！愿你每天都像这束花一样美丽绽放。',
  
  // 费用信息
  pricing: {
    subtotal: 199.00,
    deliveryFee: 15.00,
    total: 214.00
  },
  
  // 订单状态流程
  statusFlow: [
    {
      name: '下单成功',
      time: '06-15 14:30',
      completed: true,
      icon: 'check'
    },
    {
      name: '支付成功',
      time: '06-15 14:35',
      completed: true,
      icon: 'check'
    },
    {
      name: '商品出库',
      time: '待处理',
      completed: false,
      icon: 'box'
    },
    {
      name: '配送中',
      time: '待处理',
      completed: false,
      icon: 'truck'
    },
    {
      name: '已送达',
      time: '待处理',
      completed: false,
      icon: 'flag-checkered'
    }
  ]
});

// 组件挂载时初始化
onMounted(() => {
  userStore.initializeAuth();
});

// 方法
const cancelOrder = () => {
  console.log('取消订单');
  // 取消订单逻辑
};

const contactService = () => {
  console.log('联系客服');
  // 联系客服逻辑
};

const trackOrder = () => {
  console.log('查看物流');
  // 查看物流逻辑
};

// 用户登出
const handleLogout = () => {
  userStore.logout();
  router.push('/login');
};
</script>

<template>
  <div class="min-h-screen flex flex-col" style="background-color: #f8f8f8;">
    <!-- 导航栏 -->
    <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
      <div class="container mx-auto flex items-center justify-between">
        <a @click.prevent="router.push('/')" href="#" class="text-2xl font-bold text-rose-500 flex items-center">
          <font-awesome-icon icon="seedling" class="text-rose-500 mr-2" />
          花礼相伴
        </a>
        <div class="hidden lg:block w-1/3">
          <div class="relative">
            <input type="text" placeholder="搜索鲜花、场景..." 
              class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
            <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
          </div>
        </div>
        <nav class="hidden md:flex space-x-6">
          <a @click.prevent="router.push('/')" href="#" class="text-gray-600 hover:text-rose-500">首页</a>
          <a @click.prevent="router.push('/categories')" href="#" class="text-gray-600 hover:text-rose-500">分类</a>
          <a @click.prevent="router.push('/cart')" href="#" class="text-gray-600 hover:text-rose-500">购物车</a>
        </nav>
        <div class="flex items-center space-x-4">
          <a @click.prevent="router.push('/cart')" href="#" class="p-2 relative">
            <font-awesome-icon icon="shopping-cart" class="text-gray-600 text-xl" />
            <span class="absolute top-0 right-0 bg-rose-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">3</span>
          </a>
          
          <!-- 未登录状态 -->
          <template v-if="!userStore.checkIsLoggedIn">
            <a @click.prevent="router.push('/login')" href="#" class="hidden md:block text-gray-600 hover:text-rose-500">登录</a>
            <a @click.prevent="router.push('/register')" href="#" class="hidden md:block text-white bg-rose-500 px-4 py-2 rounded-lg hover:bg-rose-600 transition duration-300">注册</a>
          </template>
          
          <!-- 已登录状态 -->
          <template v-else>
            <div class="hidden md:flex items-center space-x-3">
              <div class="flex items-center space-x-2">
                <img 
                  :src="userStore.getUserAvatar" 
                  :alt="userStore.getDisplayName"
                  class="w-8 h-8 rounded-full object-cover"
                >
                <span class="text-gray-700">{{ userStore.getDisplayName }}</span>
              </div>
              <div class="relative group">
                <button class="text-gray-600 hover:text-rose-500">
                  <font-awesome-icon icon="chevron-down" class="text-sm" />
                </button>
                <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                  <a @click.prevent="router.push('/user-center')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
                  <a @click.prevent="router.push('/order-detail')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">我的订单</a>
                  <a @click.prevent="router.push('/favorites')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">我的收藏</a>
                  <div class="border-t border-gray-100"></div>
                  <a @click.prevent="handleLogout" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <!-- 移动端搜索栏 -->
      <div class="mt-3 relative md:hidden">
        <input type="text" placeholder="搜索鲜花、场景..." 
          class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
        <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
      </div>
    </header>

    <!-- 主体内容区域 -->
    <main class="flex-grow container mx-auto px-4 py-6 md:py-8">
      <!-- 面包屑导航 -->
      <div class="text-sm text-gray-500 mb-4">
        <a @click.prevent="router.push('/')" href="#" class="hover:text-rose-500">首页</a> &gt; 
        <a @click.prevent="router.push('/user-center')" href="#" class="hover:text-rose-500">个人中心</a> &gt; 
        <span class="text-gray-700">订单详情</span>
      </div>

      <h1 class="text-2xl font-bold mb-6 text-gray-800">订单详情</h1>

      <!-- 订单状态和基本信息 -->
      <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-6">
        <div class="md:flex md:justify-between md:items-center">
          <div>
            <p class="text-gray-500 mb-2">订单编号：<span class="text-gray-700">{{ order.id }}</span></p>
            <p class="text-gray-500">下单时间：<span class="text-gray-700">{{ order.createTime }}</span></p>
          </div>
          <div class="mt-4 md:mt-0">
            <div class="text-rose-500 text-lg font-medium">{{ order.status }}</div>
          </div>
        </div>
        
        <!-- 订单状态流程 -->
        <div class="mt-6">
          <div class="flex justify-between items-center relative">
            <div class="absolute left-0 right-0 top-1/2 h-1 bg-gray-200 -z-10">
              <div class="h-full bg-rose-500 w-2/5"></div>
            </div>
            
            <div 
              v-for="(step, index) in order.statusFlow" 
              :key="index"
              class="flex flex-col items-center"
            >
              <div 
                :class="[
                  'w-8 h-8 rounded-full flex items-center justify-center mb-2',
                  step.completed 
                    ? 'bg-rose-500 text-white' 
                    : 'bg-gray-300 text-white'
                ]"
              >
                <font-awesome-icon :icon="step.icon" />
              </div>
              <div 
                :class="[
                  'text-sm font-medium',
                  step.completed ? 'text-rose-500' : 'text-gray-500'
                ]"
              >
                {{ step.name }}
              </div>
              <div class="text-xs text-gray-500">{{ step.time }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 收货信息 -->
      <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-6">
        <h2 class="text-lg font-bold mb-4 text-gray-800">收货信息</h2>
        
        <div class="space-y-2">
          <p><span class="text-gray-500 inline-block w-20">收货人：</span>{{ order.recipient.name }}</p>
          <p><span class="text-gray-500 inline-block w-20">联系电话：</span>{{ order.recipient.phone }}</p>
          <p><span class="text-gray-500 inline-block w-20">收货地址：</span>{{ order.recipient.address }}</p>
        </div>
      </div>

      <!-- 配送信息 -->
      <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-6">
        <h2 class="text-lg font-bold mb-4 text-gray-800">配送信息</h2>
        
        <div class="space-y-2">
          <p><span class="text-gray-500 inline-block w-20">配送方式：</span>{{ order.delivery.method }}</p>
          <p><span class="text-gray-500 inline-block w-20">期望时间：</span>{{ order.delivery.expectedDate }} {{ order.delivery.expectedTime }}</p>
          <p><span class="text-gray-500 inline-block w-20">配送状态：</span><span class="text-rose-500">{{ order.delivery.status }}</span></p>
        </div>
      </div>

      <!-- 商品清单 -->
      <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-6">
        <h2 class="text-lg font-bold mb-4 text-gray-800">商品清单</h2>
        
        <div 
          v-for="(item, index) in order.items" 
          :key="item.id"
          :class="[
            'pb-4 mb-4',
            index < order.items.length - 1 ? 'border-b border-gray-100' : ''
          ]"
        >
          <div class="flex">
            <div class="w-16 h-16 md:w-20 md:h-20 flex-shrink-0 rounded overflow-hidden mr-4">
              <img 
                :src="item.image" 
                :alt="item.name" 
                class="w-full h-full object-cover"
              >
            </div>
            <div class="flex-grow">
              <h3 class="font-medium text-gray-800">{{ item.name }}</h3>
              <p class="text-sm text-gray-500 mt-1">规格：{{ item.spec }} | 包装：{{ item.package }}</p>
              <div class="flex justify-between items-center mt-2">
                <span class="text-rose-500 font-bold">¥{{ item.price }}</span>
                <span class="text-gray-500">x{{ item.quantity }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 留言卡片 -->
        <div v-if="order.message" class="bg-gray-50 p-3 rounded-md mb-4">
          <h3 class="font-medium mb-2 text-gray-800">留言卡片</h3>
          <p class="text-gray-700">{{ order.message }}</p>
        </div>

        <!-- 费用明细 -->
        <div class="space-y-2">
          <div class="flex justify-between text-gray-600">
            <span>商品金额：</span>
            <span>¥{{ order.pricing.subtotal.toFixed(2) }}</span>
          </div>
          <div class="flex justify-between text-gray-600">
            <span>配送费：</span>
            <span>¥{{ order.pricing.deliveryFee.toFixed(2) }}</span>
          </div>
          <div class="flex justify-between text-lg font-bold pt-2 border-t border-gray-100 mt-2">
            <span>实付金额：</span>
            <span class="text-rose-500">¥{{ order.pricing.total.toFixed(2) }}</span>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex flex-wrap gap-4 justify-center md:justify-end">
        <button 
          @click="cancelOrder"
          class="px-6 py-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition duration-300 text-gray-700"
        >
          取消订单
        </button>
        <button 
          @click="contactService"
          class="px-6 py-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition duration-300 text-gray-700"
        >
          联系客服
        </button>
        <button 
          @click="trackOrder"
          class="px-6 py-2 bg-rose-500 text-white rounded-md hover:bg-rose-600 transition duration-300"
        >
          查看物流
        </button>
      </div>
    </main>

    <!-- 底部导航栏 - 移动端 -->
    <footer class="md:hidden mt-auto bg-white border-t border-gray-200">
      <div class="flex justify-around py-2">
        <a @click.prevent="router.push('/')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="home" class="text-lg" />
          <span class="text-xs mt-1">首页</span>
        </a>
        <a @click.prevent="router.push('/categories')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="th-large" class="text-lg" />
          <span class="text-xs mt-1">分类</span>
        </a>
        <a @click.prevent="router.push('/cart')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="shopping-cart" class="text-lg" />
          <span class="text-xs mt-1">购物车</span>
        </a>
        <a @click.prevent="router.push('/user-center')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon :icon="['far', 'user']" class="text-lg" />
          <span class="text-xs mt-1">我的</span>
        </a>
      </div>
    </footer>

    <!-- 页脚 - PC端 -->
    <footer class="hidden md:block bg-white pt-8 pb-6 mt-8 border-t border-gray-200">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
          <div>
            <h3 class="font-bold text-gray-800 mb-4">关于我们</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="#" class="hover:text-rose-500">品牌故事</a></li>
              <li><a href="#" class="hover:text-rose-500">企业文化</a></li>
              <li><a href="#" class="hover:text-rose-500">门店展示</a></li>
              <li><a href="#" class="hover:text-rose-500">联系我们</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-gray-800 mb-4">购物指南</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="#" class="hover:text-rose-500">购物流程</a></li>
              <li><a href="#" class="hover:text-rose-500">支付方式</a></li>
              <li><a href="#" class="hover:text-rose-500">常见问题</a></li>
              <li><a href="#" class="hover:text-rose-500">售后服务</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-gray-800 mb-4">配送服务</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="#" class="hover:text-rose-500">配送范围</a></li>
              <li><a href="#" class="hover:text-rose-500">配送时间</a></li>
              <li><a href="#" class="hover:text-rose-500">配送费用</a></li>
              <li><a href="#" class="hover:text-rose-500">特殊配送服务</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-gray-800 mb-4">联系我们</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li class="flex items-center">
                <font-awesome-icon icon="phone" class="mr-2 text-rose-500" /> 
                400-800-8888
              </li>
              <li class="flex items-center">
                <font-awesome-icon icon="envelope" class="mr-2 text-rose-500" /> 
                service@flowercompany.com
              </li>
              <li class="flex items-center">
                <font-awesome-icon icon="map-marker-alt" class="mr-2 text-rose-500" /> 
                北京市朝阳区建国路88号
              </li>
            </ul>
            <div class="flex space-x-4 mt-4">
              <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
                <font-awesome-icon :icon="['fab', 'weixin']" />
              </a>
              <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
                <font-awesome-icon :icon="['fab', 'weibo']" />
              </a>
              <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
                <font-awesome-icon icon="envelope" />
              </a>
            </div>
          </div>
        </div>
        <div class="border-t border-gray-200 pt-6 text-center text-sm text-gray-500">
          <p>© 2023 花礼相伴 版权所有 京ICP备12345678号</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
a {
  cursor: pointer;
}
</style>
